import { useState, useEffect } from "react";
import { Form, Input, Select } from "antd";
import { useStore } from "@/store";
import { Drawer } from "@arco-design/web-react";

const BackModal = ({ visibleBackModal, isAdd, elementsIndex }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [form] = Form.useForm();
  const { powerPointArr, curpowerPointIndex, modifyPowerPoint } = useStore();
  const PPtBgtypeWatch = Form.useWatch("PPtBgtype", form);

  useEffect(() => {
    // 当visibleCodeModal为true时，设置modalVisible为true
    if (visibleBackModal) {
      setModalVisible(true);
      const soloValue = powerPointArr?.[curpowerPointIndex - 1] || {};
      if (soloValue) {
        form.setFieldsValue({
          PPtBgtype: soloValue?.PPtBgtype || "color",
          PPtBgValue1: soloValue?.PPtBgValue1,
          PPtBgValue2: soloValue?.PPtBgValue2,
        });
      }
      // 如果是添加操作，重置表单
      // if (isAdd) {
      //   form.resetFields();
      // } else {
      //   // 编辑进来
      //   // 获取当前幻灯片元素的信息
      //   const { blockWidth, blockHeight, content, fontSize, xAxis, yAxis } =
      //     powerPointArr[curpowerPointIndex - 1].elements[elementsIndex];
      //   // 设置表单的值为当前幻灯片元素的信息
      //   form.setFieldsValue({
      //     blockWidth,
      //     blockHeight,
      //     content,
      //     fontSize,
      //     xAxis,
      //     yAxis,
      //   });
      // }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visibleBackModal]);

  // 处理取消按钮的点击事件
  const handleCancel = () => {
    // 重置表单字段
    form.resetFields();
    // 设置模态框不可见
    setModalVisible(false);
  };

  // 处理确定按钮点击事件
  const handleOK = () => {
    // 验证表单字段
    form.validateFields().then((values) => {
      // 复制powerPointArr数组
      const newSlideList = [...powerPointArr];
      newSlideList[curpowerPointIndex - 1].PPtBgtype = values?.PPtBgtype;
      newSlideList[curpowerPointIndex - 1].PPtBgValue1 = values?.PPtBgValue1;
      newSlideList[curpowerPointIndex - 1].PPtBgValue2 = values?.PPtBgValue2;
      // if (isAdd) {
      //   // 新增一个元素
      //   newSlideList[curpowerPointIndex - 1].elements.push({
      //     sortId: newSlideList[curpowerPointIndex - 1].elements.length + 1, // 排序id
      //     id: nanoid(),
      //     type: "Code",
      //     ...values,
      //   });
      // } else {
      //   // 修改一个元素
      //   newSlideList[curpowerPointIndex - 1].elements[elementsIndex] = {
      //     ...newSlideList[curpowerPointIndex - 1].elements[elementsIndex],
      //     ...values,
      //   };
      // }
      //  修改一个元素时
      modifyPowerPoint(newSlideList);
      // 关闭模态框
      setModalVisible(false);
    });
  };

  return (
    <Drawer
      width={500}
      title={"设置代码"}
      visible={modalVisible}
      onCancel={handleCancel}
      onOk={handleOK}
      okText="确定"
      cancelText="取消"
    >
      {/* // 表单组件 */}
      <Form
        // 表单标签宽度
        labelCol={{ span: 6 }}
        // 表单实例
        form={form}
        // 表单初始值
        initialValues={{
          PPtBgtype: "color",
          PPtBgValue1: "",
          PPtBgValue2: "",
        }}
      >
        <Form.Item
          label="背景类型"
          name="PPtBgtype"
          rules={[{ required: true, message: "不得为空" }]}
        >
          <Select
            style={{ width: "100%" }}
            options={[
              { label: "颜色", value: "color" },
              { label: "渐变", value: "gradient" },
              { label: "图像", value: "img" },
            ]}
          />
        </Form.Item>
        {PPtBgtypeWatch === "color" && (
          <Form.Item
            label="颜色"
            name="PPtBgValue1"
            rules={[{ required: true, message: "不得为空" }]}
          >
            <Input style={{ width: "100%" }} />
          </Form.Item>
        )}
        {PPtBgtypeWatch === "img" && (
          <Form.Item
            label="图像地址"
            name="PPtBgValue1"
            rules={[{ required: true, message: "不得为空" }]}
          >
            <Input style={{ width: "100%" }} />
          </Form.Item>
        )}
        {PPtBgtypeWatch === "gradient" && (
          <>
            <Form.Item
              label="渐变开始颜色"
              name="PPtBgValue1"
              rules={[{ required: true, message: "不得为空" }]}
            >
              <Input style={{ width: "100%" }} />
            </Form.Item>
            <Form.Item
              label="渐变结束颜色"
              name="PPtBgValue2"
              rules={[{ required: true, message: "不得为空" }]}
            >
              <Input style={{ width: "100%" }} />
            </Form.Item>
          </>
        )}
      </Form>
    </Drawer>
  );
};

export default BackModal;
